<template>
<div class="videopag">
  <div class="title">
    <div class="title-seacrh" >

        <span class="s1">
          <img src="../img/1.png" alt="">
        </span>
      <div>
        <input type="text" placeholder='像鱼' >

      </div>
      <span class="s3">
          <img src="../img/2.png" alt="">
        </span>
    </div>


  </div>
  <div class="tab">
    <van-tabs  animated swipeable background="#c74c3e" color="white"  title-inactive-color="white"
              title-active-color="#fffffe" class="tabss" v-model="activiname">
      <van-tab v-for="(key,item) in viedeoGroup" :key="item" :title=key :name=item>
            <div class="video "  v-for="(key,items) in videoUrl" :key="items">

              <!--<video-player  class="video-player vjs-custom-skin"-->
                             <!--ref="videoPlayer"-->
                             <!--:src=videoUrl[items]-->
                             <!--:playsinline="true"-->
                             <!--:options="playerOptions"-->
                              <!--@click="fn(items)"-->

              <!--&gt;</video-player>-->
              <video  :src=videoUrl[items] controls :poster=coverUrl[items]></video>
              <span class="text">{{title[items]}}</span>
              <p>
                <span class="s1">
                  <img :src=avatarUrl[items] alt="">
                </span>
                <span class="s2">
                  {{nikName[items]}}
                </span>
                <span class="s3">
                  <img src="../img/video/dz.png" alt="">
                  <span>{{praisedCount[items]}}</span>
                </span>
                <span class="s4">
                   <img src="../img/video/xiaoxi.png" alt="">
                  <span>{{shareCount[items]}}</span>
                </span>
                <span class="s5">
                    <img src="../img/video/yy.png" alt="">
                </span>
                <span class="s6">
                  <img src="../img/myyinyue/more.png"/>
                </span>
              </p>
            </div>
      </van-tab>
    </van-tabs>
  </div>

</div>

</template>

<script>
  import {mapState,mapMutations} from 'vuex'
    export default {

        name: "videopag",
        data(){
          return {
            activiname: 0,

          }
        },
        computed:{
          ...mapState(['viedeoGroup','videoId','videoUrl','coverUrl','praisedCount','title','shareCount','avatarUrl','nikName'])
        },
        methods: {
          fn(items){
            console.log(items);
          },
        },

        created(){
          this.$api.getVideoGroup({uid:this.$storage.get('user').account.id})
            .then((res)=>{
              const arr = [];
              const id = [];
              for(let i = 0; i < 7; i ++){
                arr.push(res.data.data[i].name);
                id.push(res.data.data[i].id);
              }
              this.$store.commit('getVideoGroup',arr);
              this.$store.commit('getVideoId',id);
              this.$api.getVideoUrl({id:this.$store.state.videoId[[0]]});
            })
            .catch((err)=>{
              console.log(err);
            });


        },
      watch:{
        activiname:function () {
          this.$api.getVideoUrl({id:this.$store.state.videoId[this.activiname]});
        }
      },
      beforeDestroy(){
        this.$api.getVideoUrl({id:this.$store.state.videoId[this.activiname]});
      }

    }
</script>

<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
  .videopag{
    .title{
      width: 100%;
      padding-bottom: 20px;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #c74c3e;
      .title-seacrh{
        font-size: 0;

        box-sizing: border-box;
        padding-top: 80px;

        .s1{
          padding-left: 60px;

          img{
            width: 60px;
          }
        }
        .s3{
          padding-left: 40px;
        }
        span{
          display: inline-block;
          box-sizing: border-box;
          font-size: 16px;
          img{
            width: 60px;
            vertical-align: middle;
          }
        }
        div{
          position: relative;
          font-size: 16px;
          display: inline-block;

          img{
            width: 40px;
          }
          input{
            background-color: #cf6a60;
            border-radius: 60px;
            border: none;

            height: 90px;
            width: 920px;
            text-align: center;
            margin-left: 54px;
            font-size: 35px;
            outline: medium;
            color: #e5b3af;
          }
        }
      }


    }
    .tab{
      width: 100%;
      position: absolute;
      margin-bottom: 180px;
      top: 190px;
      .van-tabs--line .van-tabs__wrap{
        box-sizing: border-box;
        padding-bottom: 20px;
      }
      .video{
        width: 100%;
        padding: 20px ;
        position: relative;
        box-sizing: border-box;
        video{
          height: 680px;
          width: 100%;

          border-radius: 20px;

        }
        .video-js .vjs-icon-placeholder {
          height: 680px;
          width: 100%;

          border-radius: 20px;
        }
        .play{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          img{
            width: 210px;
          }
        }
        .text{
          display: inline-block;
          font-size: 50px;
          width: 100%;
          font-weight: bold;
          padding-top: 20px;
          box-sizing: border-box;
          padding-bottom: 40px;
          border-bottom: 2px solid #ccc;
        }

        p{
          position: relative;
          box-sizing: border-box;
          padding: 20px;
          span{
            display: inline-block;
            vertical-align: middle;
            font-size: 25px;
            color: #666667;
            img{
              width: 60px;
              object-fit: cover;
              vertical-align: middle;
            }
          }
          .s1{
            width: 90px;
            height: 90px;
            border-radius: 50%;

            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .s2{
            font-size: 35px;
            width: 350px;
          }
          .s3{
            margin-left: 125px;
            position: relative;
            span{
              position: absolute;
              left: 40px;
              top: -15px;
            }
          }
          .s4{
            margin-left: 70px;
            position: relative;
            span{
              position: absolute;
              left: 45px;
              top: -15px;
            }
          }
          .s5{
            margin-left: 70px;
          }
          .s6{
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

  }

</style>
